 <template>
  <div class="app">
    <header>
      <div class="head">
        <img src="./b5376f5332ca282a80570f38af210a9.png" alt="" />
        <input type="text" placeholder="请输入商品名" />
        <img src="./60c8eba645f0c47fde7a670e2e39f30.png" alt="" />
        <img src="./574959023e2aa068f5ad1f678eb5424.png" alt="" />
        <img src="./8b29424e38824019408ba47abeae2d3.png" alt="" />
        <p><span></span><span></span><span></span></p>
      </div>
      <div class="dc">
        <ul>
          <li @click="d(0)" :class="{ act: dc == 0 }">点菜</li>
          <li @click="d(1)" :class="{ act: dc == 1 }">评价</li>
          <li @click="d(2)" :class="{ act: dc == 2 }">商家</li>
        </ul>
        <span>好友拼单</span>
      </div>
    </header>
    <main>
      <div class="m-left">
        <span
          v-for="(i, index) in arrnew"
          :key="index"
          @click="st(index)"
          :class="{ active: sty == index }"
          >{{ i.name }}</span
        >
      </div>
      <div class="m-right">
        <dl v-for="(item, index) in arr" :key="index">
          <dt><img :src="item.pic" /></dt>
          <dd>
            <p>{{ item.title }}</p>
            <p>门店销量第{{ item.xl }}名</p>
            <p>月售{{ item.ys }} 好评度100%</p>
            <p>
              <span>{{ item.zk }}</span
              ><span>限1份</span>
            </p>
            <p>
              <span>￥{{ item.price }}</span
              ><del>￥{{ item.by }}</del>
              <em v-show="item.o > 0" @click="odd(item, index)">-</em>
              <a href="" v-show="item.o > 0">{{ item.o }}</a>
              <i @click="add(item, index)">+</i>
            </p>
          </dd>
        </dl>
      </div>
    </main>
    <footer :class="{ pink: bt }">
      <p>已减{{ bf / 10 }}元</p>
      <div class="bot" @click="fot()">
        <div class="b-left">
          <img src="./a4ca1e3212ae91dce81491a5b1ea7ef.png" alt="" />
          <p>
            <span>券后</span><span>￥{{ bf }}</span
            ><del>￥20</del>
          </p>
          <p><span>优惠明细</span><span>预估另需配送费￥4</span></p>
          <span class="xyd">{{ fn }}</span>
        </div>
        <div class="b-right" :class="{ bk: yellow }">去结算</div>
      </div>
      <div class="xq" v-show="sw">
        <dl v-for="a in arr" :key="a" v-show="a.i">
          <dt><img :src="a.pic" alt="" /></dt>
          <dd>
            <div class="tit">
              <p></p>
              <p>1人份</p>
              <p>￥105</p>
            </div>
            <div class="sz">
              <span @click="j(a)">-</span>
              <span>{{a.o}}</span>
              <span @click="s(a)">+</span>
            </div>
          </dd>
        </dl>
      </div>
    </footer>
  </div>
</template>
 <script>
export default {
  data() {
    return {
      arrnew: [
        { name: "推荐" },
        { name: "折扣" },
        { name: "特色中份菜" },
        { name: "大份菜" },
        { name: "炖菜.汤菜" },
        { name: "鱼" },
        { name: "凉菜" },
        { name: "主食" },
        { name: "饮品" },
      ],
      arr: [
        {
          pic: "https://i02piccdn.sogoucdn.com/e60edb7efe0ad3a3",
          title: "牛排",
          xl: 1,
          ys: 68,
          zk: "9.8折",
          f: 1,
          price: 188,
          by: 288,
          o: 0,
          i: false,
        },
        {
          pic: "https://i02piccdn.sogoucdn.com/dc4bca3aca5ad0d3",
          title: "香辣猪蹄",
          xl: 2,
          ys: 30,
          zk: "9.8折",
          f: 1,
          price: 99,
          by: 199,
          o: 0,
          i: false,
        },
        {
          pic: "https://i02piccdn.sogoucdn.com/2b459923ff24895f",
          title: "寿司",
          xl: 3,
          ys: 500,
          zk: "9.5折",
          f: 1,
          price: 30,
          by: 58.8,
          o: 0,
          i: false,
        },
        {
          pic: "https://i01piccdn.sogoucdn.com/be25dc6205964ceb",
          title: "便当",
          xl: 2,
          ys: 1000,
          zk: "9.5折",
          f: 1,
          price: 29.9,
          by: 38.8,
          o: 0,
          i: false,
        },
      ],
      sty: 0,
      dc: 0,
      de: 50,
      dt: 50,
      ad: 0,
      yellow: false,
      bt: false,
      dl: 50,
      sw: false,
    };
  },
  methods: {
    st(index) {
      this.sty = index;
      console.log(this.sty);
    },
    d(de) {
      this.dc = de;
    },
    add(item, index) {
      this.ad = item.o;
      this.bt = true;
      this.de = index;
      this.$store.commit("fr", item);
      if (this.ad > 0) {
        item.o++;
        this.yellow = true;
        this.bt = true;
      }
    },
    odd(item) {
      if (item.o > 0) {
        item.o--;
        this.ad = item.o;
      } else {
        item.o = this.arr.length + 1;
      }
      this.$store.commit("fd", item);
      if (this.ad == 0) {
        this.yellow = false;
        this.bt = false;
      }
    },
    fot() {
      this.sw = true;
    },
    s(a) {
      a.o++;
    },
    j(a) {
      if (a.o > 0) {
        a.o--;
      } else {
        a.i = false;
      }
    },
  },
  computed: {
    bf() {
      var num = 0;
      this.arr.forEach((item) => {
        num += item.price * item.o;
      });
      return num.toFixed(2);
    },
    fn() {
      var sum = 0;
      this.arr.forEach((item) => {
        sum += item.o;
      });
      return sum;
    },
  },
};
</script>
 <style lang='css' >
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a {
  text-decoration: none;
}
ul,
li {
  list-style: none;
}

a,
input,
button {
  outline: none;
  -webkit-tap-highlight-color: transparent;
  /* 移除点击产生的高亮效果：透明色 */
}
input,
button {
  -webkit-appearance: none;
  /* 在ios中加入这句能修改button和input的宽高 */
}
img,
a {
  -webkit-touch-callout: none;
  outline: none;
  color: #010101;
  font-size: 14px;
  /* 禁止长按弹出菜单 */
}
.act {
  border-bottom: 3px solid #f2d03b !important;
}
img {
  vertical-align: middle;
}
html,
body,
.app {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.active {
  background: #fff !important;
}
header {
  width: 100%;
  height: 6rem;
  display: flex;
  flex-direction: column;
}
.head {
  width: 100%;
  height: 40%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 10px;
  position: relative;
}
.head input {
  height: 1.5rem;
  border-radius: 15px;
  background: #f1f1f1;
  border: none;
  padding-left: 30px;
  box-sizing: border-box;
}
.head img:nth-child(1) {
  width: 1rem;
  height: 1rem;
}
.head img:nth-child(2) {
  width: 1rem;
  height: 1rem;
}
.head img:nth-child(3) {
  position: absolute;
  left: 55px;
  width: 1rem;
  height: 1rem;
}
.head img:nth-child(4) {
  width: 1.5rem;
  height: 1.5rem;
}
.head img:nth-child(5) {
  width: 1.5rem;
  height: 1.5rem;
}
.head p {
  width: 2rem;
  height: 3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.head p span {
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 0.3rem;
  background: #656565;
}
.dc {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 10px;
  border-bottom: 1px solid #cccc;
  align-items: center;
}
.dc ul {
  width: 60%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dc ul li {
  padding-bottom: 10px;
  box-sizing: border-box;
}
.dc span {
  width: 5rem;
  height: 2rem;
  border: 1px solid #e2bf95;
  align-items: center;
  display: flex;
  justify-content: center;
  border-radius: 10px;
  color: #f9a34c;
}
main {
  flex: 1;
  overflow-y: auto;
  display: flex;
  justify-content: space-between;
}
.m-left {
  width: 6rem;
  height: 36rem;
  background: #f5f8fd;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.m-left span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-size: 14px;
  height: 10rem;
  white-space: nowrap;
}
.m-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 10px 0px 10px;
}
.m-right dl {
  width: 100%;
  height: 8rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.m-right dt {
  width: 7rem;
  height: 100%;
}
.m-right dt img {
  width: 7rem;
  height: 100%;
  border-radius: 10px;
}
.m-right dd {
  flex: 1;
  padding: 0px 10px;
  display: flex;
  flex-direction: column;
}
.m-right dd p {
  margin-top: 5px;
}
.m-right dd p:nth-child(1) {
  font-weight: 700;
  color: #262626;
}
.m-right dd p:nth-child(2) {
  width: 7rem;
  height: 1rem;
  background: #fef8e2;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #cf9331;
}
.m-right dd p:nth-child(3) {
  color: #a09ea1;
  font-size: 14px;
  white-space: nowrap;
}
.m-right dd p:nth-child(4) {
  width: 7rem;
  font-size: 14px;
  color: #e16570;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 10px;
  border: 1px solid #e0d4d8;
}
.m-right dd p:nth-child(5) {
  position: relative;
}
.m-right dd p:nth-child(5) span {
  font-weight: 700;
  color: #f44b4e;
}
.m-right dd p:nth-child(5) del {
  font-size: 14px;
  color: #a8a6a7;
}
.m-right dd p:nth-child(5) i {
  position: absolute;
  width: 1rem;
  height: 1rem;
  background: #fecc35;
  border-radius: 3px;
  font-style: normal;
  right: 0px;
  top: 3px;
  text-align: center;
  line-height: 0.8rem;
}
.m-right dd p:nth-child(5) em {
  position: absolute;
  width: 1rem;
  height: 1rem;
  border: 1px solid #fecc35;
  border-radius: 3px;
  font-style: normal;
  right: 35px;
  top: 3px;
  text-align: center;
  line-height: 0.8rem;
}
.m-right dd p:nth-child(5) a {
  position: absolute;
  right: 20px;
}
footer {
  width: 100%;
  height: 7rem;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 10px;
  box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 10px;
  position: relative;
}
.bot {
  width: 100%;
  height: 3rem;
  border-radius: 30px;
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  padding: 0px 5px;
}
.b-left {
  width: 70%;
  height: 100%;
  background: #010101;
  border-top-left-radius: 30px;
  border-bottom-left-radius: 30px;
  padding: 5px 0px 0px 60px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.b-left img {
  top: 35px;
  left: 20px;
  position: absolute;
  width: 3rem;
  height: 4rem;
}
.b-left p:nth-child(2) span:nth-child(1) {
  font-size: 13px;
  color: #fbfbfb;
}
.b-left p:nth-child(2) span:nth-child(2) {
  font-size: 17px;
  color: #fafafa;
}
.b-left p:nth-child(2) del {
  font-size: 13px;
  color: #838383;
}
.b-left p:nth-child(3) span:nth-child(1) {
  font-size: 13px;
  color: #e2c13c;
}
.b-left p:nth-child(3) {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.b-left p:nth-child(3) span:nth-child(2) {
  font-size: 13px;
  color: #f4f2f5;
}
.b-right {
  justify-content: center;
  align-items: center;
  display: flex;
  width: 9rem;
  background: #010101;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
}
.bk {
  background: #fec635 !important;
}
.xyd {
  position: absolute;
  width: 1rem;
  height: 1em;
  background: #fb4f39;
  border-radius: 0.5rem;
  left: 52px;
  top: 64px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  color: #ffff;
}
.pink {
  background: #fff5eb;
}
.xq {
  width: 100%;
  height: auto;
  overflow-y: auto;
  position: fixed;
  bottom: 60px;
}
.xq dl {
  width: 100%;
  height: 5rem;
  display: flex;
  justify-content: space-between;
}
.xq dl dt {
  width: 5rem;
  height: 100%;
}
.xq dl dt img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}
.xq dl dd {
  flex: 1;
  display: flex;
  justify-content: space-between;
  background: #ffff;
  position: relative;
}
.xq dl dd .tit {
  width: 13rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-left: 30px;
  margin-top: 10px;
}
.xq dl dd .tit p:nth-child(1) {
  color: #000;
}
.xq dl dd .tit p:nth-child(2) {
  font-size: 14px;
  color: #ccc;
}
.xq dl dd .tit p:nth-child(3) {
  color: red;
}
.xq dl dd .sz {
  width: 3rem;
  height: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  bottom: 0px;
  right: 12px;
}
.sz span:nth-child(1) {
  width: 1rem;
  height: 1rem;
  border: 1px solid #fecc35;
  border-radius: 3px;
  text-align: center;
  line-height: 0.8rem;
}
.sz span:nth-child(3) {
  width: 1rem;
  height: 1rem;
  background: #fecc35;
  border-radius: 3px;
  text-align: center;
  line-height: 0.8rem;
}
</style>